<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<!--
1. v-for在组件中的问题：选中一个id=2，当在数组前添加一个元素时，之前选选中的那个id上移了一个
2.该问题的原因：vue.js用v-for正在更新已渲染过的元素列表时，它默认’就地复用‘的策略，如果数据项的顺序被改变，Vue将不是移动dom元素来匹配数据项的顺序，
而是 简单服用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素 
3.解决问题的方案：当在组件中使用v-for时，key现在是必须的,在该案例中，把:key='it.id加到v-for右边解决了问题-->

<body>
    <div id="a">
        <div>
            id:<input type="text" v-model='id'> name :
            <input type="text" v-model='name'> <input type="button" value="提交" @click='tijiao'>
        </div>
        <div v-for='it in shuju' :key='it.id'>
            <input type="checkbox">{{it.id}}{{it.name}}</div>
    </div>
    <script>
        new Vue({
            el: '#a',
            data: {
                id: '',
                name: '',
                shuju: [{
                    name: 'a',
                    id: 1
                }, {
                    name: 'b',
                    id: 2
                }, {
                    name: 'c',
                    id: 3
                }, {
                    name: 'd',
                    id: 4
                }, {
                    name: 'e',
                    id: 5
                }],
            },
            methods: {
                tijiao: function() {
                    this.shuju.unshift({
                        name: this.name,
                        id: this.id
                    });
                }
            }
        })
    </script>
</body>

</html>